
import styles from './styles.module.scss'
import Arraw from "@/assets/news/last.png"
import Link from 'next/link'
import Recommend from '@/components/News/Recommend'
import BrocadeCollection from '@/components/News/BrocadeCollection'
import useNavData from '@/store/getters/home'
import { Breadcrumb } from 'antd';
import RenderJudge from '@/components/RenderJudge'
import QQ from "@/assets/share/qq.png"
import VB from "@/assets/share/vb.png"
import WX from "@/assets/share/wx.png"
import QZ from "@/assets/share/qz.png"
import QQS from "@/assets/share/qqs.png"
import VBS from "@/assets/share/vbs.png"
import WXS from "@/assets/share/wxs.png"
import QZS from "@/assets/share/qzs.png"
import { Popover } from 'antd';
import QRCode from 'qrcode.react'
import NewsDetail from '@/components/H5/News/Detail'
const shareInfo = [
  {
    i: QQ,
    s: QQS
  },
  {
    i: VB,
    s: VBS,
    link: (url, title, pic) => `https://service.weibo.com/share/share.php?url=${url}&sharesource=weibo&title=${title}&pic=${pic}&appkey=`
  },
  {
    i: WX,
    s: WXS,
    popover: true,
    ewm: (url) => (
      <section className={styles.qrcode}>
        <QRCode value={url} size={133} id="qrCode" />
        <p>用微信扫描二维码</p>
      </section>
    )
  },
  {
    i: QZ,
    s: QZS,
    link: (url, title, pic) => `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&sharesource=qzone&title=${title}&pics=${pic}&summary=`
  },
]
import Head from 'next/head'
import { useEffect } from 'react'
import { useSafeState } from 'ahooks'
const News = ({ newsDetail, recommendNewsData, videoList, type, mobile }) => {
  const { newsNavList } = useNavData()
  const typeItem = newsNavList?.find(row => row?.id === type)
  const [link, setLink] = useSafeState('')
  useEffect(() => {
    setLink(window.location?.href)
  }, [])
  return (
    <>
      <Head>
        <title>{newsDetail?.news?.newsTitle}</title>
      </Head>
      <RenderJudge value={mobile} active={
        <NewsDetail newsDetail={newsDetail} typeItem={typeItem} />
      } inactive={
        <>
          <nav className={styles.nav}>
            <Breadcrumb separator=">">
              <Breadcrumb.Item href='/'>首页</Breadcrumb.Item>
              <Breadcrumb.Item href={`/news`}>新闻中心</Breadcrumb.Item>
              <Breadcrumb.Item href={`/news/${typeItem?.en}`}>{typeItem?.newsTypeName}</Breadcrumb.Item>
              <Breadcrumb.Item>{newsDetail?.news?.newsTitle}</Breadcrumb.Item>
            </Breadcrumb>
          </nav>
          <main className={styles.newsDatil}>
            <section>
              <article className={styles.left}>
                <aside className={styles.share}>
                  <p>
                    <em>-&nbsp;</em>
                    <span>分享</span>
                    <em>&nbsp; -</em>
                  </p>
                  {
                    shareInfo?.map((row, index) => {
                      const img = (
                        <>
                          <img src={row?.i?.src} alt="" />
                          <img src={row?.s?.src} alt="" />
                        </>
                      )

                      if (row?.link) {
                        return (
                          <Link href={row?.link(link, newsDetail?.news?.newsTitle
                            , newsDetail?.news?.newsImg)} key={index}>
                            <a target="_blank" title={newsDetail?.news?.newsTitle}>
                              {img}
                            </a>
                          </Link>
                        )
                      }
                      if (row?.popover) {
                        return (
                          <Popover placement="leftTop" content={row?.ewm(link)} key={index}>
                            {
                              img
                            }
                          </Popover>
                        )
                      }

                      return (
                        <span key={index}>
                          {img}
                        </span>
                      )
                    })
                  }
                </aside>
                <section className={styles.articleInfo}>
                  <h1>{newsDetail?.news?.newsTitle}</h1>
                  <p>发表于:{newsDetail?.news?.publishDate}</p>
                  <div dangerouslySetInnerHTML={{ __html: newsDetail?.news?.content }} >
                  </div>
                  <footer>
                    <RenderJudge value={newsDetail?.previous?.id} active={
                      <Link href={`/news/` + newsDetail?.previous?.id}>
                        <a>
                          <span>
                            <img src={Arraw.src} alt="" />
                            <i>上一条</i>
                          </span>
                          <span className='textoverone'>{newsDetail?.previous?.newsTitle}</span>
                        </a>
                      </Link>
                    } />
                    <RenderJudge value={newsDetail?.next?.id} active={
                      <Link href={`/news/` + newsDetail?.next?.id}>
                        <a style={{ marginLeft: 'auto' }}>
                          <span>
                            <i style={{ marginLeft: 'auto' }}>下一条</i>
                            <img src={Arraw.src} alt="" className={styles.rotate} />
                          </span>
                          <span className='textoverone'>{newsDetail?.next?.newsTitle}</span>
                        </a>
                      </Link>
                    } />
                  </footer>
                </section>

              </article>
              <aside className={styles.right}>
                <Recommend data={recommendNewsData} link={(row) => `/news/${row?.id}`} />
                <blockquote style={{ height: 20 }}></blockquote>
                <BrocadeCollection data={videoList} link={(row) => `/marvellous/${row?.id}`} />
              </aside>
            </section>
          </main>
        </>
      } />
    </>
  )
}
export default News